<template>
  <div class="app-main">
    <div class="compTitle">智能体配置</div>
<el-form
    ref="ruleFormRef"
    
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    label-position="top"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity File" >
      <el-upload class="upload-demo" drag action="http://localhost:9090/fileUpload" name="files" :show-file-list="true"
        multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="Agent Name" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Agent Name">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Agent description" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item label="Select platform" prop="count">
      <el-select-v2
        v-model="ruleForm.count"
        placeholder="Activity count"
        :options="options"
      />
    </el-form-item>
    <el-form-item label="Wechat(Webhook generate)" prop="webhookUrl">
      <el-input v-model="ruleForm.webhookUrl" />
    </el-form-item>
    <el-form-item label="Wechat(Token)" prop="wechatToken">
      <el-input v-model="ruleForm.wechatToken" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(this.$refs.ruleFormRef)">
        SaveConfig
      </el-button>
      <el-button @click="resetForm(this.$refs.ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
  </div>
  
</template>

<script>
export default {
  name: 'AgentSetting',
  data() {
    return {
      formSize: 'default',
      ruleFormRef : null,
      ruleForm: {
        name: 'Hello',
        region: '',
        count: '',
        date1: '',
        date2: '',
        delivery: false,
        location: '',
        type: [],
        resource: '',
        desc: '',
        webhookUrl: '',
        webhookSecret: '',
        wechatToken: '',
      },
      locationOptions: ['Home', 'Company', 'School'],
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        region: [
          {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
          },
        ],
        count: [
          {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
          },
        ],
        
        
        desc: [
          { required: true, message: 'Please input activity form', trigger: 'blur' },
        ],
        webhookUrl: [
          { required: true, message: 'Please input webhookUrl', trigger: 'blur' },
        ],
        wechatToken: [
          { required: true, message: 'Please input Wechat token', trigger: 'blur' },
        ],
      },
      options: Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
      }))
    }
  },
  methods: {
    async submitForm(formEl) {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    resetForm(formEl) {
      if (!formEl) return
      formEl.resetFields()
    }
  }
}
</script>

<style scoped>
.upload-demo{width: 100%;}
.compTitle{margin:0 auto;width: 90%;font-family: Inter, Inter;
font-weight: bold;
font-size: 32px;
color: #0F141A;
line-height: 40px;
text-align: left;
font-style: normal;
text-transform: none;}
.demo-ruleForm{margin:0 auto;width: 90%;}
</style>